<template>
  <div class="bank-sites-detail">
    <el-card>
      <div class="header">
        <el-button @click="goBack" type="info" style="margin-right: 12px;">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <span class="title">绑定站点详情</span>
      </div>
      
      <!-- 银行账号信息 -->
      <div v-if="bankAccount" style="margin-bottom: 20px; padding: 16px; background-color: #f5f7fa; border-radius: 4px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
          <div>
            <strong>银行卡号：</strong>{{ bankAccount.cardNo }}
          </div>
          <el-tag type="primary">{{ getBoundSitesCount() }} 个绑定站点</el-tag>
        </div>
        <div style="margin-bottom: 8px;">
          <strong>科目：</strong>{{ bankAccount.subjectName }}（{{ bankAccount.subjectId }}）
        </div>
        <div>
          <strong>有效期：</strong>{{ bankAccount.expiryDate }}
        </div>
      </div>
      
      <!-- 自动加密倒计时提示 -->
      <div v-if="encryptCountdown > 0" style="margin-bottom: 16px; padding: 12px; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; display: flex; align-items: center;">
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-icon color="#f39c12"><Warning /></el-icon>
          <span style="color: #856404; font-size: 14px;">
            页面将在 {{ Math.floor(encryptCountdown / 60) }}:{{ String(encryptCountdown % 60).padStart(2, '0') }} 后自动加密
          </span>
        </div>
      </div>
      
      <!-- 绑定站点列表 -->
      <div style="margin-bottom: 12px; padding: 8px; background-color: #f0f9ff; border: 1px solid #b3d8ff; border-radius: 4px;">
        <el-icon color="#409eff"><InfoFilled /></el-icon>
        <span style="color: #409eff; font-size: 14px; margin-left: 4px;">
          此页面显示从交易账号页面关联的绑定站点信息，如需修改请前往交易账号页面操作
        </span>
      </div>
      <el-table :data="pagedSites" style="width: 100%" max-height="400">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="site" label="站点" width="120" />
        <el-table-column prop="tradeAccount" label="交易账号" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <span style="color: #999; font-size: 12px;">只读</span>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :total="boundSites.length"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 50]"
        style="margin-top: 16px; text-align: right;"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, InfoFilled, Warning } from '@element-plus/icons-vue'
import { tradeAccounts } from '@/mock/tradeAccounts'

const router = useRouter()
const route = useRoute()

// 银行账号数据
const bankAccount = ref<any>(null)

// 验证状态管理
const bankVerified = ref(false)
const encryptCountdown = ref(0)
const autoEncryptTimer = ref<number | null>(null)

// 分页相关
const page = ref({
  current: 1,
  size: 10
})

// 获取绑定站点数据（从交易账号页面回显）
const boundSites = computed(() => {
  if (!bankAccount.value) return []
  
  const sites: any[] = []
  tradeAccounts.value.forEach(tradeAccount => {
    if (tradeAccount.payAccount === bankAccount.value.cardNo) {
      sites.push({
        site: tradeAccount.site,
        tradeAccount: tradeAccount.account
      })
    }
  })
  
  return sites
})

// 获取绑定站点数量
function getBoundSitesCount() {
  return boundSites.value.length
}

// 分页后的站点数据
const pagedSites = computed(() => {
  const start = (page.value.current - 1) * page.value.size
  const end = start + page.value.size
  return boundSites.value.slice(start, end)
})

// 页面加载时获取银行账号数据
onMounted(() => {
  const accountId = route.params.id as string
  // 模拟获取银行账号数据
  bankAccount.value = {
    id: accountId,
    subjectId: '001',
    subjectName: '现金',
    cardNo: '6222021234567890',
    safeCode: '123',
    expiryDate: '12/25'
  }
  
  // 从sessionStorage获取验证状态和倒计时
  const storedVerified = sessionStorage.getItem('bankVerified')
  const storedCountdown = sessionStorage.getItem('bankEncryptCountdown')
  
  if (storedVerified === 'true' && storedCountdown) {
    bankVerified.value = true
    encryptCountdown.value = parseInt(storedCountdown)
    
    // 如果倒计时大于0且没有正在运行的定时器，启动定时器
    if (encryptCountdown.value > 0 && !autoEncryptTimer.value) {
      startAutoEncrypt()
    }
  } else {
    // 如果没有验证状态，跳转到验证页面
    router.push('/settings/account?tab=bank')
  }
})

// 返回银行账号页面
function goBack() {
  router.push('/settings/account?tab=bank')
}

// 启动自动加密
function startAutoEncrypt() {
  // 如果已经有定时器在运行，不重复启动
  if (autoEncryptTimer.value) {
    return
  }
  
  // 启动定时器，每秒更新倒计时
  autoEncryptTimer.value = setInterval(() => {
    encryptCountdown.value--
    
    // 更新sessionStorage中的倒计时
    sessionStorage.setItem('bankEncryptCountdown', encryptCountdown.value.toString())
    
    // 当倒计时为0时，自动加密
    if (encryptCountdown.value <= 0) {
      autoEncrypt()
    }
  }, 1000)
}

// 自动加密
function autoEncrypt() {
  bankVerified.value = false
  encryptCountdown.value = 0
  
  if (autoEncryptTimer.value) {
    clearInterval(autoEncryptTimer.value)
    autoEncryptTimer.value = null
  }
  
  // 清除sessionStorage中的验证状态
  sessionStorage.removeItem('bankVerified')
  sessionStorage.removeItem('bankEncryptCountdown')
  
  ElMessage.warning('银行账号页面已自动加密，请重新验证')
  
  // 跳转到银行账号页面
  router.push('/settings/account?tab=bank')
}

// 页面卸载时清理定时器
onUnmounted(() => {
  if (autoEncryptTimer.value) {
    clearInterval(autoEncryptTimer.value)
    autoEncryptTimer.value = null
  }
})




</script>

<style scoped>
.bank-sites-detail {
  padding: 16px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}
</style> 